<template>
  <div class="chat-page">
    <!-- 聊天页面头部 -->
    <div class="chat-header">
      <!-- 返回按钮，点击触发goBack方法 -->
      <button @click="goBack" class="back-btn">← 返回</button>
      <!-- 聊天对象信息展示 -->
      <div class="chat-user-info">
        <!-- 好友头像，如果为空则使用默认头像 -->
        <img :src="currentFriend.avatar || '/default-avatar.png'" :alt="currentFriend.nickname" />
        <!-- 好友昵称 -->
        <span>{{ currentFriend.nickname }}</span>
      </div>
    </div>

    <!-- 聊天内容区域包装器 -->
    <div class="chat-content-wrapper">
      <!-- 消息容器，用于展示聊天记录 -->
      <div class="messages-container" ref="messagesContainer">
        <!--
          遍历消息列表，为每条消息创建DOM元素
          :key 使用消息ID确保唯一性
          :class 根据发送者ID判断消息样式（发送/接收）
          :ref 设置消息引用，用于后续定位
          :data-message-id 存储消息ID到DOM属性
        -->
        <div
            v-for="message in currentMessages"
            :key="message.messageId"
            :class="['message', message.senderId === currentUser.userId ? 'sent' : 'received']"
            :ref="setMessageRef"
            :data-message-id="message.messageId"
        >
          <!-- 消息内容区域 -->
          <div class="message-content">
            {{ message.content }}
          </div>
          <!-- 消息时间显示 -->
          <div class="message-time">
            {{ formatTime(message.createdAt) }}
          </div>
        </div>
      </div>

      <!-- 消息输入区域 -->
      <div class="message-input-wrapper">
        <div class="message-input">
          <!--
            消息输入框
            v-model 双向绑定输入内容
            @keypress.enter 监听回车键发送消息
          -->
          <input
              v-model="newMessage"
              @keypress.enter="sendMessage"
              placeholder="输入消息..."
              class="input-field"
          />
          <!-- 发送按钮 -->
          <button @click="sendMessage" class="send-btn">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'ChatPage',
  setup() {
    // 使用Vue Router的composition API
    const route = useRoute() // 当前路由信息
    const router = useRouter() // 路由控制器

    // 响应式数据定义
    const currentFriend = ref({}) // 当前聊天好友信息
    const currentMessages = ref([]) // 当前聊天消息列表
    const currentUser = ref({}) // 当前登录用户信息
    const newMessage = ref('') // 新消息输入内容
    const messagesContainer = ref(null) // 消息容器DOM引用
    const messageRefs = ref({}) // 存储所有消息DOM元素的引用
    const hasScrolledToTarget = ref(false) // 是否已滚动到目标消息标志
    const fromPath = ref('') // 记录来源路径（备用）

    /**
     * 从localStorage获取用户token
     * @returns {string|null} 用户token或null
     */
    const getToken = () => {
      return localStorage.getItem('token')
    }

    /**
     * 设置消息DOM元素的引用
     * @param {HTMLElement} el - 消息DOM元素
     */
    const setMessageRef = (el) => {
      if (el) {
        // 将消息元素按messageId存储到引用对象中
        messageRefs.value[el.dataset.messageId] = el
      }
    }

    /**
     * 获取当前登录用户信息
     */
    const getCurrentUser = async () => {
      try {
        const response = await fetch('/api/users/getUserInfo', {
          headers: {
            'token': getToken()
          }
        })
        const result = await response.json()

        if (result.code === 200) {
          currentUser.value = result.data
          // 获取用户信息成功后加载好友信息和聊天记录
          await loadFriendInfo()
          await loadChatHistory()
        } else {
          alert('获取用户信息失败: ' + result.msg)
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    }

    /**
     * 加载好友信息
     */
    const loadFriendInfo = async () => {
      const friendId = route.params.friendId // 从路由参数获取好友ID
      try {
        const response = await fetch(`/api/users/selById?userId=${friendId}`, {
          headers: {'token': getToken()}
        })
        const result = await response.json()

        if (result.code === 200) {
          currentFriend.value = result.data
        }
      } catch (error) {
        console.error('加载好友信息失败:', error)
      }
    }

    /**
     * 加载聊天记录
     */
    const loadChatHistory = async () => {
      const friendId = route.params.friendId
      try {
        const response = await fetch(`/api/messages/selSession?friendId=${friendId}`, {
          headers: {
            'token': getToken()
          }
        })
        const result = await response.json()

        if (result.code === 200) {
          currentMessages.value = result.data || []
          // 重置滚动状态，确保下次可以重新定位
          hasScrolledToTarget.value = false

          // 等待DOM更新后执行滚动操作
          nextTick(() => {
            // 如果URL中有scrollToMessage参数，则滚动到指定消息
            if (route.query.scrollToMessage && !hasScrolledToTarget.value) {
              scrollToMessage(route.query.scrollToMessage)
            } else {
              // 否则滚动到底部（最新消息）
              scrollToBottom()
            }
          })
        }
      } catch (error) {
        console.error('加载聊天记录失败:', error)
      }
    }

    /**
     * 滚动到指定消息
     * @param {string} messageId - 要滚动到的消息ID
     */
    const scrollToMessage = (messageId) => {
      const messageElement = messageRefs.value[messageId]
      if (messageElement && messagesContainer.value) {
        // 计算消息在容器中的位置并滚动
        const container = messagesContainer.value
        const messageRect = messageElement.getBoundingClientRect()
        const containerRect = container.getBoundingClientRect()

        // 滚动到消息位置，向上偏移50px让消息更可见
        container.scrollTop = messageElement.offsetTop - container.offsetTop - 50

        // 添加高亮效果，突出显示目标消息
        messageElement.style.backgroundColor = '#fff9c4'
        messageElement.style.transition = 'background-color 0.5s ease'

        // 3秒后移除高亮效果
        setTimeout(() => {
          messageElement.style.backgroundColor = ''
        }, 3000)

        // 标记已滚动到目标消息
        hasScrolledToTarget.value = true
      }
    }

    /**
     * 发送消息
     */
    const sendMessage = async () => {
      // 检查消息内容是否为空
      if (!newMessage.value.trim()) return

      // 构造消息数据对象
      const messageData = {
        receiverId: route.params.friendId, // 接收者ID
        content: newMessage.value.trim(), // 消息内容
        msgType: 1, // 消息类型：1-文本
        isRead: 0 // 是否已读：0-未读
      }

      try {
        const response = await fetch('/api/messages/add', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'token': getToken()
          },
          // 将对象转换为URL编码格式
          body: new URLSearchParams(messageData)
        })

        const result = await response.json()

        if (result.code === 200) {
          // 发送成功，清空输入框并重新加载聊天记录
          newMessage.value = ''
          await loadChatHistory()
        } else {
          alert('发送失败: ' + result.msg)
        }
      } catch (error) {
        console.error('发送消息失败:', error)
      }
    }

    /**
     * 滚动到消息容器底部
     */
    const scrollToBottom = () => {
      if (messagesContainer.value) {
        nextTick(() => {
          messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
        })
      }
    }

    /**
     * 格式化时间显示
     * @param {string|Date} date - 要格式化的日期
     * @returns {string} 格式化后的时间字符串
     */
    const formatTime = (date) => {
      return new Date(date).toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    /**
     * 返回上一页逻辑
     */
    const goBack = () => {
      // 如果有from参数，优先跳转到from指定的路径
      if (route.query.from) {
        router.push(route.query.from)
      } else {
        // 否则使用浏览器默认的返回行为
        router.back()
      }
    }

    // 监听路由变化，当有scrollToMessage参数时滚动到指定消息
    watch(
        () => route.query.scrollToMessage, // 监听scrollToMessage参数变化
        (newMessageId) => {
          if (newMessageId && currentMessages.value.length > 0) {
            nextTick(() => {
              scrollToMessage(newMessageId)
            })
          }
        }
    )

    // 组件挂载后执行
    onMounted(() => {
      getCurrentUser() // 获取当前用户信息
    })

    // 返回模板中需要使用的数据和方法
    return {
      currentFriend,
      currentMessages,
      currentUser,
      newMessage,
      messagesContainer,
      sendMessage,
      formatTime,
      goBack,
      setMessageRef
    }
  }
}
</script>

<style scoped>
/* 聊天页面整体样式 */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 全屏高度 */
}

/* 聊天头部样式 */
.chat-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  margin-right: 15px;
  cursor: pointer;
}

.chat-user-info {
  display: flex;
  align-items: center;
}

.chat-user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 10px;
}

/* 聊天内容区域样式 */
.chat-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占据剩余空间 */
  height: 100%;
  overflow: hidden;
}

.messages-container {
  flex: 1; /* 占据主要空间 */
  padding: 15px;
  overflow-y: auto; /* 垂直滚动 */
  background: #f9f9f9;
  min-height: 0; /* 允许收缩 */
}

/* 消息样式 */
.message {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 5px;
  transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

/* 发送的消息靠右对齐 */
.message.sent {
  align-items: flex-end;
}

/* 接收的消息靠左对齐 */
.message.received {
  align-items: flex-start;
}

.message-content {
  max-width: 70%; /* 限制消息最大宽度 */
  padding: 10px 15px;
  border-radius: 18px; /* 圆角气泡 */
  word-wrap: break-word; /* 长单词换行 */
}

/* 发送消息样式 */
.message.sent .message-content {
  background: #007bff;
  color: white;
}

/* 接收消息样式 */
.message.received .message-content {
  background: white;
  border: 1px solid #ddd;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* 消息输入区域样式 */
.message-input-wrapper {
  background: white;
  border-top: 1px solid #ddd;
  flex-shrink: 0; /* 防止被压缩 */
}

.message-input {
  display: flex;
  padding: 15px;
  background: white;
}

.input-field {
  flex: 1; /* 占据剩余空间 */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
  margin-right: 10px;
}

.send-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.send-btn:hover {
  background: #0056b3; /* 悬停效果 */
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .chat-header {
    padding: 10px;
  }

  .message-content {
    max-width: 85%; /* 移动端增加消息宽度 */
  }
}
</style>